<template>
  <div class="container">
    <el-dialog title="录入" :visible.sync="addModelShow" width="750px" :before-close="handleClose">
      <div class="container_examine">
        <!--<p>预约信息</p>-->
        <div class="examine">
          <el-form ref="formInline" :rules="rules" :inline="true" :model="formInline" label-width="155px">
            <el-form-item label="归属单位:" prop="company">
              <el-input v-model="formInline.company" placeholder="请输入归属单位" />
            </el-form-item>
            <el-form-item label="版本型号:" prop="version" style="width: 58%">
              <el-input v-model="formInline.version" placeholder="请输入版本型号" />
            </el-form-item>
<!--            <el-form-item label="联系电话:" prop="tel" >-->
<!--              <el-input v-model="formInline.tel" placeholder="请输入联系电话" />-->
<!--            </el-form-item>-->
            <el-form-item label="购买日期:" prop="purchase_date" style="width: 100%">
              <el-date-picker
                v-model="formInline.purchase_date"
                :picker-options="pickerOptions1"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="使用日期:" prop="use_date" style="width: 100%">
              <el-date-picker
                v-model="formInline.use_date"
                :picker-options="pickerOptions1"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="是否绑定:" prop="bindingstate" style="width: 100%">
              <el-radio-group v-model="formInline.bindingstate">
                <el-radio label="是" />
                <el-radio label="否" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="姓名:" prop="working_personnel" style="width: 58%"  v-if="formInline.bindingstate == '是'">
              <el-cascader
                style="width: 100%"
                v-model="people"
                :options="unitList"
                ref="myCascader"
                :props="{label:'name',value:'code'}"
                @change="handleChange"></el-cascader>
            </el-form-item>
            <el-form-item label="是否启动状态:" prop="enablestate" style="width: 100%">
              <el-radio-group v-model="formInline.enablestate">
                <el-radio label="是" />
                <el-radio label="否" />
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" size="small" @click="cancelBtn('formInline')">取消</el-button>
        <el-button size="small" type="primary" @click="saveBtn('formInline')">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from '../utils'
import {getMatterDataList, addAppointment, getDevice, getBindingName, getStructureList} from '../api'
export default {
  props:['addModelShow'],
  data() {
    return {
      formInline: {
        working_personnel: '',
        company:'',
        purchase_date: '',
        version: '',
        use_date: '',
        bindingstate: '',
        enablestate: '',
        ryid: '',
      },
      people:'',
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        township:[
          { required: true, message: '请选择所属乡镇', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入办事人联系电话', trigger: 'blur' }
        ],
        cardId: [
          { required: true, message: '请输入办事人身份证号', trigger: 'blur' }
        ],
        event: [
          { required: true, message: '请选择上门服务事项', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请选择上门时间', trigger: 'change' }
        ],
        other: [
          { required: true, message: '请输入审核意见', trigger: 'blur' }
        ]
      },
      timeRange: [
        "08:30~11:30",
        "13:30~16:30",
      ],
      matterList: [],
      userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
      townshipList:[
        {name:'嘉善县罗星街道'},
        {name:'嘉善县陶庄镇'},
        {name:'嘉善县魏塘街道'},
        {name:'嘉善县天凝镇'},
        {name:'嘉善县开发区（嘉善县惠民街道）'},
        {name:'嘉善县西塘镇'},
        {name:'嘉善县姚庄镇'},
        {name:'嘉善县干窑镇'},
        {name:'嘉善县大云镇'},
      ],
      peopleList: [],
      unitList:[]

    }
  },
  watch: {
    'formInline.time': function(newVal) {
      this.formInline.start_time = this.formatTime(newVal);
      console.log(this.formInline.start_time)
    }

  },
  created() {
    this.getMatterList()
    this.getStructureList()
  },
  methods: {
    // 获取机构列表
    getStructureList() {
      getStructureList('派发').then(res => {
        this.unitList = res.data.data.sjlist;
      })
    },
    // 时间格式化
    formatTime(time) {
      if (time) {
        return dateFormat(new Date(time), 'yyyy-MM-dd')
      } else {
        return ''
      }
    },
    // 获取事项
    getMatterList() {
      getMatterDataList().then(res => {
        this.matterList = res.data.data
      })
    },
    saveBtn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //todo 判断有点乱
          if(this.formInline.bindingstate&&this.formInline.enablestate){
            if(this.formInline.working_personnel){
              if(this.formInline.bindingstate==="是"){
                const data = {
                  working_personnel:this.formInline.working_personnel,
                  company:this.formInline.company,
                  purchase_date:this.formInline.purchase_date,
                  version:this.formInline.version,
                  use_date:this.formInline.use_date,
                  binding_status:this.formInline.bindingstate == "是" ? '解除绑定' : "绑定",
                  status:this.formInline.enablestate == "是" ? '停用' : "启用",
                  ryid:this.formInline.ryid,
                }
                getDevice(data).then(res => {
                  if (res.data.code == 200) {
                    this.$message({
                      type: 'success',
                      message: '录入成功'
                    })
                    this.$refs[formName].resetFields()
                    this.formInline.other = ''
                    this.formInline.other = ''
                    this.formInline.startTime = ''
                    this.formInline.endTime = ''
                    this.people = ''
                    this.formInline.ryid = ''
                    this.formInline.working_personnel = ''
                    this.$emit('addFun', true)
                  }
                })
              }else{
                this.$message.warning('绑定状态为否')
              }
            }else {
              if(this.formInline.bindingstate==="是"){
                this.$message.warning('绑定状态为是，请选择人员')
              }else{
                const data = {
                  company:this.formInline.company,
                  purchase_date:this.formInline.purchase_date,
                  version:this.formInline.version,
                  use_date:this.formInline.use_date,
                  binding_status:this.formInline.bindingstate == "是" ? '解除绑定' : "绑定",
                  status:this.formInline.enablestate == "是" ? '停用' : "启用",
                }
                console.log(data);
                // return;
                getDevice(data).then(res => {
                  if (res.data.code == 200) {
                    this.$message({
                      type: 'success',
                      message: '录入成功'
                    })
                    this.$refs[formName].resetFields()
                    this.formInline.other = ''
                    this.formInline.startTime = ''
                    this.formInline.endTime = ''
                    this.people = ''
                    this.formInline.ryid = ''
                    this.formInline.working_personnel = ''
                    this.$emit('addFun', true)
                  }
                })
              }
            }
          }else{
            this.$message.warning('请选择状态')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleChange(value) {
      let labelName = this.$refs['myCascader'].getCheckedNodes()[0].pathLabels;
      this.formInline.ryid = value[value.length-1];
      this.formInline.working_personnel = labelName[labelName.length-1];
    },
    cancelBtn(formName) {
      this.people = ''
      this.formInline.ryid = ''
      this.formInline.working_personnel = ''
      this.$refs[formName].resetFields()
      this.$emit('addFun', false)
    },
    handleClose(){
      this.$emit('addFun', false)
    }

  }
}
</script>

<style lang="scss" scoped>
  .container {
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    ::v-deep .el-dialog {
      max-height: 82vh;
      overflow: auto;
    }
    ::v-deep .el-dialog__body {
      margin-top: 25px;
      padding:30px 20px 30px 30px;
    }
    ::v-deep .el-dialog__header {
      /*background: #3489ff;*/
      position: fixed;
      width: 750px;
      z-index: 99;
      /*.el-dialog__title {*/
        /*color: #ffffff;*/
      /*}*/
      .el-dialog__headerbtn {
        top: 14px !important;
        cursor: pointer;
        /*i {*/
          /*color: #ffffff;*/
        /*}*/
      }
    }
    .container_examine{
      margin-top: 15px;
      p{
        font-size: 15px;
        color: #3D4D60;
        font-weight: bold;
      }
      .el-form--inline .el-form-item{
        width: 48%;
        /*margin-bottom:12px;*/
      }
      ::v-deep .el-form-item__content{
       width: calc(100% - 155px);
     }
     ::v-deep .el-textarea__inner,
      ::v-deep .el-select{
        width: 100%;
      }
      /*::v-deep .el-date-editor{*/
        /*width: 50%;*/
      /*}*/
      /*::v-deep .el-form-item__label{*/
        /*font-weight: normal;*/
        /*line-height:20px;*/
      /*}*/
    }
  }

</style>
